@import url('https://fonts.googleapis.com/css?family=NTR|Quicksand');
@font-face{
  font-family: Pixeltype;
  src: url('../font/Pixeltype.ttf');
}
@font-face{
  font-family: FreePixel;
  src: url('../font/FreePixel.ttf');
}
@font-face{
  font-family: break;
  src: url('../font/BREAK___.ttf');
}

#wrap{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#op_wrap{
  background-color: black;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
.op_element{

}
.one ul{
  list-style: none;
  position: relative;
  width: 167px;
  height: 255px;
  margin: 0 auto;
  padding: 0;
}
.one ul li{
  margin: 0;
  padding: 0;
}
.one ul li:nth-child(1){
  width: 167px;
  height: 188px;
  position: absolute;
  left: 0;
  opacity: 0;
}
.one ul li:nth-child(2){
  position: absolute;
  left: 26px;
  bottom: 0;
  width: 116px;
  height: 24px;
}
.one ul li:nth-child(3) p{
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 23px;
  letter-spacing: 4px;
  position: absolute;
  top: 209px;
  left: 49px;
  width: 76px;
  height: 29px;
}
.one ul li:nth-child(4) div{
  position: absolute;
  width: 0px;
  height: 22px;
  background-color: white;
  top: 232px;
  left: 27px;
  opacity: 0.8;
}
.one ul li:nth-child(5) p{
  position: absolute;
  top: 216px;
  left: 29px;
  width: 116px;
  height: 24px;
  color: #cccccc;
  opacity: 0.8;
  font-family: Pixeltype;
  font-size: 22px;

}
.one ul li:nth-child(2) canvas{

}
.two ul:nth-of-type(1){
  list-style: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
}
.two ul:nth-of-type(1) li{
  margin: 0;
  padding: 0;
}
.two ul:nth-of-type(1) li ul{
  list-style: none;
  position: absolute;
  padding: 0;
  margin: 0;
  width: 620px;
  height: 420px;
}
.two ul:nth-of-type(1) li ul li{
  position: absolute;
  margin: 0;
  padding: 0;
}
.two ul:nth-of-type(1) li ul li p{
  width: 616px;
  height: 385px;
  color: #cccccc;
  font-family: Pixeltype;
  font-size: 22px;
  word-break: break-all;
  overflow: hidden;
  opacity: 0.8;
}
.two ul:nth-of-type(1) li ul li:nth-child(1){
  width: 620px;
  height: 420px;
  opacity: 0.0;
}
.two ul:nth-of-type(1) li ul li:nth-child(2){
  top: 12px;
  left: 2px;
  width: 616px;
  height: 387px;
}

#apps_wrap{
  width: 1920px;
  height: 1080px;
  margin: 0 auto;
  position: relative;
}
.apps ul{
  list-style: none;
  position: absolute;
  margin : 0;
  padding: 0;
}
.apps ul li{
  position: absolute;
  margin: 0;
  padding: 0;
  background-blend-mode: multiply;
  background-repeat: no-repeat;
}
.app_one ul{
  top: 50px;
  left: 30px;
  width: 260px;
  height: 898px;
}
.app_one ul li:nth-child(1){
  background-image: url('../image/app_one_BG.png');
  top: 0;
  left: 0;
  width: 260px;
  height: 898px;
}
.app_one ul li:nth-child(2){
  top: 3px;
  left: 11px;
}
.app_one ul li:nth-child(2) p{
  color: black;
  font-family: FreePixel;
  font-size: 20pt;
  margin: 0;
  letter-spacing: -1px;
}
.app_one ul li:nth-child(3){
  top: 248px;
  left: 0;
  width: 260px;
  height: 117px;
  overflow: hidden;
  background-image: url('../image/260 x 117.png');
}
.app_one ul li:nth-child(3) p{
  color: white;
  font-family: Pixeltype;
  font-size: 10pt;
  opacity: 0.7;
  margin: 0;
  letter-spacing: 0.3px;
  line-height: 10px;
  float: left;
  overflow: hidden;
}
.app_one ul li:nth-child(3) P:nth-child(1){
  width: 87px;
  text-align: left;
}
.app_one ul li:nth-child(3) P:nth-child(2){
  width: 75px;
  text-align: left;
  margin-left: 12px;
}
.app_one ul li:nth-child(3) P:nth-child(3){
  width: 74px;
  text-align: left;
  margin-left: 12px;
}
.app_one ul li:nth-child(4){
  top: 392px;
  left: 0;
  width: 234px;
  height: 234px;
  background-image: url('../image/234 x 234.png');
}

.app_two ul{
  top: 50px;
  left: 325px;
  width: 260px;
  height: 840px;
}
.app_two ul li:nth-child(1){
  background-image: url('../image/app_two_BG.png');
  top: 0;
  left: 0;
  width: 260px;
  height: 840px;
}
.app_two ul li:nth-child(2){
  top: 3px;
  left: 11px;
}
.app_two ul li:nth-child(2) p{
  color: black;
  font-family: FreePixel;
  font-size: 20pt;
  margin: 0;
  letter-spacing: -1px;
}
.app_two ul li:nth-child(3){
  top: 46px;
  left: 28px;
  background-image: url('../image/215 x 160.png');
}
.app_two ul li:nth-child(3) p{
  color: white;
  font-family: break;
  font-size: 142pt;
  margin: 0;
  letter-spacing: -5px;
}
.app_two ul li:nth-child(4){
  top: 231px;
  left: 0;
  width: 260px;
  height: 240px;
  background-image: url('../image/260 x 240.png');
}
.app_two ul li:nth-child(4) p{
  color: white;
  font-family: Pixeltype;
  font-size: 13pt;
  margin: 0;
  letter-spacing: 1.3px;
  line-height: 12px;
  opacity: 0.6;
  width: 260px;
  height: 240px;
  word-break: break-all;
  overflow: hidden;
}

.app_thr ul{
  top: 50px;
  left: 620px;
  width: 680px;
  height: 244px;
}
.app_thr ul li:nth-child(1){
  background-image: url('../image/app_thr_BG.png');
  top: 0;
  left: 0;
  width: 680px;
  height: 244px;
}
.app_thr ul li:nth-child(2){
  top: 35px;
  left: 370px;
  width: 310px;
  height: 76px;
  background-image: url('../image/310 x 76.png');
}

.app_fou ul:nth-child(1){
  top: 315px;
  left: 620px;
  width: 680px;
  height: 666px;
}
.app_fou ul:nth-child(1) li:nth-child(1){
  background-image: url('../image/app_fou_BG.png');
  top: 0;
  left: 0;
  width: 680px;
  height: 666px;
}
.app_fou ul:nth-child(1) li:nth-child(2) p{
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 8px;
  position: absolute;
  letter-spacing: 1.5px;
  margin: 0;
}
.app_fou ul:nth-child(1) li:nth-child(2) p:nth-child(1){
  top: 15px;
  left: 460px;
  width: 60px;
  opacity: 0.6;
}
.app_fou ul:nth-child(1) li:nth-child(2) p:nth-child(2){
  top: 28px;
  left: 447px;
  width: 90px;
  opacity: 0.6;
}
.app_fou ul:nth-child(1) li:nth-child(2) p:nth-child(3){
  top: 41px;
  left: 413px;
  width: 80px;
  opacity: 0.6;
}
.app_fou ul:nth-child(1) li:nth-child(3){
  top: 158px;
  left: 18px;
  width: 644px;
  height: 281px;
  background-image: url('../image/644 x 281.png');
}
.app_fou ul:nth-child(1) li:nth-child(3) p{
  color: white;
  font-family: Pixeltype;
  font-size: 10pt;
  opacity: 0.5;
  letter-spacing: 1px;
  line-height: 13px;
  margin: 0;
  height: 281px;
  overflow: hidden;
  position: absolute;
  top: 0;
}
.app_fou ul:nth-child(1) li:nth-child(3) p:nth-child(1){
  left: 0;
}
.app_fou ul:nth-child(1) li:nth-child(3) p:nth-child(2){
  left: 31px;
}
.app_fou ul:nth-child(1) li:nth-child(3) p:nth-child(3){
  left: 89px;
}
.app_fou ul:nth-child(1) li:nth-child(3) p:nth-child(4){
  left: 112px;
}
.app_fou ul:nth-child(1) li:nth-child(3) p:nth-child(5){
  left: 123px;
}
.app_fou ul:nth-child(1) li:nth-child(3) p:nth-child(6){
  left: 165px;
}
.app_fou ul:nth-child(1) li:nth-child(3) p:nth-child(7){
  left: 200px;
}
.app_fou ul:nth-child(1) li:nth-child(3) p:nth-child(8){
  left: 232px;
}
.app_fou ul:nth-child(1) li:nth-child(3) p:nth-child(9){
  left: 248px;
}
.app_fou ul:nth-child(1) li:nth-child(3) p:nth-child(10){
  left: 274px;
}
.app_fou ul:nth-child(1) li:nth-child(3) p:nth-child(11){
  left: 301px;
}
.app_fou ul:nth-child(1) li:nth-child(3) p:nth-child(12){
  left: 357px;
}
.app_fou ul:nth-child(1) li:nth-child(4){
  top: 456px;
  left: 10px;
  width: 670px;
  height: 176px;
  background-image: url('../image/670 x 176.png');
}
.app_fou ul:nth-child(1) li:nth-child(4) div{
  position: relative;
  margin: 0;
}
.app_fou ul:nth-child(1) li:nth-child(4) div p{
  color: white;
  font-family: 'NTR', sans-serif;
  font-size: 14pt;
  width: 50px;
  height: 41px;
  margin: 3px 0px 0px 0px;
  opacity: 0.6;
  text-align: center;
  float: left;
  cursor: pointer;
}
.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(1){
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 634px;
  height: 44px;
}
.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(1) p:nth-child(1){
  font-size: 11pt;
  width: 64px;
  height: 37px;
  margin-top: 7px;
}
.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(1) p:nth-child(12){
  font-size: 11pt;
  width: 70px;
  height: 37px;
  margin-top: 7px;
}
.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(2){
  left: 17px;
  width: 564px;
  height: 44px;
}
.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(2) p:nth-child(1){
  font-size: 11pt;
  width: 64px;
  height: 37px;
  margin-top: 7px;
}
.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(3){
  left: 26px;
  width: 644px;
  height: 44px;
}
.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(3) p:nth-child(1){
  font-size: 11pt;
  width: 72px;
  height: 37px;
  margin-top: 7px;
}
.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(3) p:nth-child(12){
  font-size: 11pt;
  width: 72px;
  height: 37px;
  margin-top: 7px;
}
.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(4){
  left: 10px;
  width: 646px;
  height: 44px;
}
.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(4) p:nth-child(1){
  font-size: 11pt;
  width: 74px;
  height: 37px;
  margin-top: 7px;
}
.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(4) p:nth-child(12){
  font-size: 11pt;
  width: 72px;
  height: 37px;
  margin-top: 7px;
}
.app_fou ul:nth-child(1) li:nth-child(5){
  top: 645px;
  left: 170px;
  width: 340px;
  height: 21px;
  background-image: url('../image/340 x 21.png');
}
.app_fou ul:nth-child(1) li:nth-child(5) p{
  color: white;
  font-family: Pixeltype;
  font-size: 14pt;
  letter-spacing: 1px;
  opacity: 0.8;
  text-align: center;
  overflow: hidden;
  margin: 5px 0px 0px 0px;
}
.app_fou ul:nth-child(1) li:nth-child(6){
  top: 14px;
  left: 16px;
  width: 324px;
  height: 103px;
  background-image: url('../image/324 x 103.png');
}
.app_fou ul:nth-child(1) li:nth-child(6) p{
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.6;
  overflow: hidden;
  margin: 0;
  float: left;
  position: relative;
  top: 0;
  height: 103px;
}
.app_fou ul:nth-child(1) li:nth-child(6) p:nth-child(1){
  left: 0;
}
.app_fou ul:nth-child(1) li:nth-child(6) p:nth-child(2){
  width: 243px;
  left: 17px;
  margin-right: 25px;
}
.app_fou ul:nth-child(1) li:nth-child(6) p:nth-child(3){
  text-align: right;
  width: 42px;
  right: 0;
}

.app_fiv ul{
  top: 50px;
  left: 1335px;
  width: 260px;
  height: 853px;
}
.app_fiv ul li:nth-child(1){
  background-image: url('../image/app_fiv_BG.png');
  top: 0;
  left: 0;
  width: 260px;
  height: 853px;
}
.app_fiv ul li:nth-child(2){
  top: 206px;
  left: 0;
  width: 203px;
  height: 20px;
  background-image: url('../image/203 x 20.png');
}
.app_fiv ul li:nth-child(2) p{
  color: white;
  font-family: Pixeltype;
  font-size: 24pt;
  letter-spacing: 2px;
  opacity: 0.9;
  margin: 0;
  overflow: hidden;
}
.app_fiv ul li:nth-child(3){
  width: 65px;
  height: 32px;
  top: 165px;
  left: 195px;
  background-image: url('../image/65 x 32.png');
}
.app_fiv ul li:nth-child(3) p{
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 8px;
  letter-spacing: 1px;
  opacity: 0.8;
  margin: 0;
  position: absolute;
}
.app_fiv ul li:nth-child(3) p:nth-child(1){
  top: 0;
  left: 0;
}
.app_fiv ul li:nth-child(3) p:nth-child(2){
  top: 12px;
  left: 1px;
}
.app_fiv ul li:nth-child(3) p:nth-child(3){
  top: 24px;;
  left: 2px;
}

.app_six ul{
  top: 50px;
  left: 1630px;
  width: 260px;
  height: 884px;
}
.app_six ul li:nth-child(1){
  top: 0;
  left: 0;
  width: 260px;
  height: 884px;
  background-image: url('../image/app_six_BG.png');
}
.app_six ul li:nth-child(2){
  top: 79px;
  left: 43px;
  width: 174px;
  height: 177px;
  cursor: pointer;
  background-image: url('../image/404 white.png');
}
.app_six ul li:nth-child(3){
  width: 200px;
  height: 15px;
  top: 317px;
  left: 0;
  background-image: url('../image/200 x 15.png');
}
.app_six ul li:nth-child(3) p{
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 8px;
  letter-spacing: 1px;
  margin: 0;
  opacity: 0.8;
  width: 25px;
  height: 15px;
  margin: 2px 10px 0px 0px;
  cursor: pointer;
  float: left;
}
.app_six ul li:nth-child(3) p:nth-child(6){
  margin: 2px 0px 0px 0px;
}
.app_six ul li:nth-child(4){
  top: 365px;
  left: 0;
  width: 260px;
  height: 104px;
  background-image: url('../image/260 x 104.png');
}
.app_six ul li:nth-child(4) p{
  color: white;
  font-family: Pixeltype;
  font-size: 10pt;
  letter-spacing: 0.5px;
  opacity: 0.7;
  margin: 0;
  height: 104px;
  overflow: hidden;
  line-height: 12px;
  float: left;
}
.app_six ul li:nth-child(4) p:nth-child(1){
  width: 87px;
}
.app_six ul li:nth-child(4) p:nth-child(2){
  width: 87px;
  text-align: center;
}
.app_six ul li:nth-child(4) p:nth-child(3){
  width: 86px;
  text-align: right;
}
.app_six ul li:nth-child(5){
  top: 518px;
  left: 9px;
  width: 242px;
  height: 206px;
  background-image: url('../image/242 x 206.png');
}
.app_six ul li:nth-child(5) canvas{
  position: absolute;
}
.app_six ul li:nth-child(5) #canvas1{
  top: 0;
  left: 44px;
}
.app_six ul li:nth-child(5) #canvas2{
  top: 89px;
  left: 134px;
  transform: rotate(90deg);
}
.app_six ul li:nth-child(5) #canvas3{
  top: 179px;
  left: 45px;
  transform: rotate(180deg);
}
.app_six ul li:nth-child(5) #canvas4{
  top: 90px;
  left: -45px;
  transform: rotate(270deg);
}

.app_one, .app_two, .app_thr, .app_fou, .app_fiv, .app_six{
  opacity: 0;
}
